<template>
  <div class="mod-config">
    <div class="queryData">
      <el-form :inline="true" :model="inquire" class="demo-form-inline">
        <el-form-item>
          <el-input v-model="inquire.user" placeholder="审批人"></el-input>
        </el-form-item>
        <el-form-item>
          <el-select v-model="inquire.region" placeholder="活动区域">
            <el-option label="区域一" value="shanghai"></el-option>
            <el-option label="区域二" value="beijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button size="mini" type="primary">查询</el-button>
          <el-button size="mini" type="info">重置</el-button>
        </el-form-item>
      </el-form>
      <div class="queryBox">
        <div :class="[{ maxHeiht: arrow }, 'center']">
          <p v-for="i in queryList" :key="i.id">
            {{ i.name }}：
            <span
              v-for="j in i.list"
              :key="j.id"
              :class="[queryObj[i.id] === j.id ? 'active' : '']"
              @click="queryClick(i, j)"
              >{{ j.name }}</span
            >
          </p>
          <i
            :class="[
              arrow ? 'el-icon-arrow-up' : 'el-icon-arrow-down',
              'arrow',
            ]"
            @click="arrow = !arrow"
          />
        </div>
      </div>
    </div>
    <vxeLable
      ref="vxeLable"
      :table-config="tableConfig"
      @edit="editData"
      @del="delData"
      @add="addData"
      @import="importData"
      @export="exportData"
      @checkboxChange="checkboxChange"
    >
      <div slot="header">
        <el-button size="mini" icon="el-icon-circle-plus-outline" type="primary"
          >新增</el-button
        >
        <el-button size="mini" icon="el-icon-delete" type="danger"
          >删除</el-button
        >
      </div>
    </vxeLable>

    <!-- 弹窗, 新增 / 修改 -->
    <elDialog :dialog="dialog">
      <add @close="close" />
    </elDialog>
  </div>
</template>

<script>
import vxeLable from "@/components/common/vxeLable";
import vxeLableJs from "@/components/mixins/vxeLable.js";
import elDialog from "@/components/common/dialog";
import add from "./add";
export default {
  components: {
    vxeLable,
    elDialog,
    add,
  },
  mixins: [vxeLableJs],
  data() {
    return {
      value: [],
      options: [
        {
          value: "zhinan",
          label: "指南",
          children: [
            {
              value: "shejiyuanze",
              label: "设计原则",
              children: [
                {
                  value: "yizhi",
                  label: "一致",
                },
                {
                  value: "fankui",
                  label: "反馈",
                },
                {
                  value: "xiaolv",
                  label: "效率",
                },
                {
                  value: "kekong",
                  label: "可控",
                },
              ],
            },
            {
              value: "daohang",
              label: "导航",
              children: [
                {
                  value: "cexiangdaohang",
                  label: "侧向导航",
                },
                {
                  value: "dingbudaohang",
                  label: "顶部导航",
                },
              ],
            },
          ],
        },
        {
          value: "zujian",
          label: "组件",
          children: [
            {
              value: "basic",
              label: "Basic",
              children: [
                {
                  value: "layout",
                  label: "Layout 布局",
                },
                {
                  value: "color",
                  label: "Color 色彩",
                },
                {
                  value: "typography",
                  label: "Typography 字体",
                },
                {
                  value: "icon",
                  label: "Icon 图标",
                },
                {
                  value: "button",
                  label: "Button 按钮",
                },
              ],
            },
            {
              value: "form",
              label: "Form",
              children: [
                {
                  value: "radio",
                  label: "Radio 单选框",
                },
                {
                  value: "checkbox",
                  label: "Checkbox 多选框",
                },
                {
                  value: "input",
                  label: "Input 输入框",
                },
                {
                  value: "input-number",
                  label: "InputNumber 计数器",
                },
                {
                  value: "select",
                  label: "Select 选择器",
                },
                {
                  value: "cascader",
                  label: "Cascader 级联选择器",
                },
                {
                  value: "switch",
                  label: "Switch 开关",
                },
                {
                  value: "slider",
                  label: "Slider 滑块",
                },
                {
                  value: "time-picker",
                  label: "TimePicker 时间选择器",
                },
                {
                  value: "date-picker",
                  label: "DatePicker 日期选择器",
                },
                {
                  value: "datetime-picker",
                  label: "DateTimePicker 日期时间选择器",
                },
                {
                  value: "upload",
                  label: "Upload 上传",
                },
                {
                  value: "rate",
                  label: "Rate 评分",
                },
                {
                  value: "form",
                  label: "Form 表单",
                },
              ],
            },
            {
              value: "data",
              label: "Data",
              children: [
                {
                  value: "table",
                  label: "Table 表格",
                },
                {
                  value: "tag",
                  label: "Tag 标签",
                },
                {
                  value: "progress",
                  label: "Progress 进度条",
                },
                {
                  value: "tree",
                  label: "Tree 树形控件",
                },
                {
                  value: "pagination",
                  label: "Pagination 分页",
                },
                {
                  value: "badge",
                  label: "Badge 标记",
                },
              ],
            },
            {
              value: "notice",
              label: "Notice",
              children: [
                {
                  value: "alert",
                  label: "Alert 警告",
                },
                {
                  value: "loading",
                  label: "Loading 加载",
                },
                {
                  value: "message",
                  label: "Message 消息提示",
                },
                {
                  value: "message-box",
                  label: "MessageBox 弹框",
                },
                {
                  value: "notification",
                  label: "Notification 通知",
                },
              ],
            },
            {
              value: "navigation",
              label: "Navigation",
              children: [
                {
                  value: "menu",
                  label: "NavMenu 导航菜单",
                },
                {
                  value: "tabs",
                  label: "Tabs 标签页",
                },
                {
                  value: "breadcrumb",
                  label: "Breadcrumb 面包屑",
                },
                {
                  value: "dropdown",
                  label: "Dropdown 下拉菜单",
                },
                {
                  value: "steps",
                  label: "Steps 步骤条",
                },
              ],
            },
            {
              value: "others",
              label: "Others",
              children: [
                {
                  value: "dialog",
                  label: "Dialog 对话框",
                },
                {
                  value: "tooltip",
                  label: "Tooltip 文字提示",
                },
                {
                  value: "popover",
                  label: "Popover 弹出框",
                },
                {
                  value: "card",
                  label: "Card 卡片",
                },
                {
                  value: "carousel",
                  label: "Carousel 走马灯",
                },
                {
                  value: "collapse",
                  label: "Collapse 折叠面板",
                },
              ],
            },
          ],
        },
        {
          value: "ziyuan",
          label: "资源",
          children: [
            {
              value: "axure",
              label: "Axure Components",
            },
            {
              value: "sketch",
              label: "Sketch Templates",
            },
            {
              value: "jiaohu",
              label: "组件交互文档",
            },
          ],
        },
      ],
      dialog: {
        show: false,
        title: "详情",
        width: "30%",
      },
      queryList: [],
      queryObj: {},
      arrow: false,
      inquire: {},
      tableConfig: {
        api: "",
        height: 300,
        operateBtns: [
          { emit: "edit", name: "修改", type: "primary" },
          { emit: "del", name: "删除", type: "danger" },
        ],
        inquire: {},
        tablePage: true,
        // toolbarTools: [
        //   { emit: "add", name: "新增" },
        //   { emit: "import", name: "导入" },
        //   { emit: "export", name: "导出" }
        // ],
        tableData: [
          {
            id: 10001,
            name: "Test1",
            nickname: "T1",
            role: "Develop",
            sex: "0",
            sex2: ["0"],
            num1: 40,
            age: 28,
            address: "Shenzhen",
            date12: "",
            date13: "",
          },
          {
            id: 10004,
            name: "Test4",
            nickname: "T4",
            role: "Designer",
            sex: "1",
            sex2: ["1"],
            num1: 30,
            age: 23,
            address: "Shenzhen",
            date12: "",
            date13: "2020-12-04",
          },
          {
            id: 10005,
            name: "Test5",
            nickname: "T5",
            role: "Develop",
            sex: "0",
            sex2: ["1", "0"],
            num1: 20,
            age: 30,
            address: "Shanghai",
            date12: "2020-09-20",
            date13: "",
          },
          {
            id: 10006,
            name: "Test6",
            nickname: "T6",
            role: "Designer",
            sex: "1",
            sex2: ["0"],
            num1: 10,
            age: 21,
            address: "Shenzhen",
            date12: "",
            date13: "",
          },
          {
            id: 10007,
            name: "Test7",
            nickname: "T7",
            role: "Develop",
            sex: "0",
            sex2: ["0"],
            num1: 5,
            age: 29,
            address: "test abc",
            date12: "2020-01-02",
            date13: "2020-09-20",
          },
        ],
        tableToolbar: {
          // refresh: true,
          zoom: true,
          custom: true,
          slots: {
            buttons: "toolbar_buttons",
            // tools: "toolbar_tools"
          },
        },
        tableColumn: [
          { type: "checkbox", width: 60, align: "center" },
          { type: "seq", width: 60, title: "序号" },
          { field: "name", title: "名称" },
          { field: "nickname", title: "上级菜单" },
          { field: "sex", title: "图标" },
          { field: "sex2", title: "类型" },
          { field: "num1", title: "排序号" },
          { field: "age", title: "菜单URL" },
          { field: "address", title: "授权标识" },
          {
            title: "操作",
            width: 150,
            align: "center",
            className: "operate",
            slots: { default: "operate" },
            fixed: "right",
          },
        ],
      },
    };
  },
  activated() {
    this.getDataList();
  },
  mounted() {
    this.getQueryList();
  },
  methods: {
    close() {
      this.dialog.show = false;
    },
    getQueryList() {
      this.queryList = [
        {
          name: "技术类型",
          id: "js",
          list: [
            { name: "全部", id: 1 },
            { name: "人脸识别", id: 2 },
            { name: "文字识别", id: 3 },
            { name: "语音技术", id: 4 },
            { name: "自然语音处理", id: 5 },
          ],
        },
        {
          name: "能力类型",
          id: "nl",
          list: [
            { name: "全部", id: 11 },
            { name: "预置", id: 22 },
          ],
        },
        {
          name: "一号类型",
          id: "yi",
          list: [
            { name: "全部", id: 111 },
            { name: "一号预置", id: 222 },
          ],
        },
        {
          name: "二号类型",
          id: "er",
          list: [
            { name: "全部", id: 1111 },
            { name: "二号预置", id: 2222 },
          ],
        },
        {
          name: "三号类型",
          id: "san",
          list: [
            { name: "全部", id: 11111 },
            { name: "三号预置", id: 22222 },
          ],
        },
      ];
      this.queryList.map((i) => {
        this.$set(this.queryObj, i.id, i.list[0].id);
      });
    },
    queryClick(i, j) {
      // this.queryObj[i.id] = j.id
      this.$set(this.queryObj, i.id, j.id); // this.queryObj 中动态追加属性必须通过$set
      console.log(this.queryObj);
    },
    aaa(row) {
      console.log(row);
    },
    editData() {
      this.dialog.show = true;
    },
    delData() {
      this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$message({
          type: "success",
          message: "删除成功!",
        });
      });
    },
    addData() {
      console.log("新增add");
    },
    importData() {
      this.$refs.vxeLable.uploadFileEvent((files) => {
        const formBody = new FormData();
        formBody.append("file", files[0]);
        console.log("导入import", formBody);
      });
    },
    checkboxChange(val) {
      console.log(val, "checkbox");
    },
    exportData() {
      console.log("导出export");
    },
  },
};
</script>
<style scoped lang="scss">
.queryData {
  height: 1.4rem;
  font-size: 0.12rem;
  color: #fff;
  position: relative;
  .queryBox {
    position: absolute;
    height: 1rem;
    z-index: 99;
    width: 100%;
    .center {
      background: #10121a;
      height: 100%;
      padding: 0.12rem 0.1rem;
      position: relative;
      overflow: hidden;
      p {
        margin: 0 0 0.15rem 0;
        span {
          margin-right: 0.25rem;
          cursor: pointer;
        }
        span.active {
          color: #efcc2a;
        }
      }
      .arrow {
        position: absolute;
        left: 50%;
        bottom: 0;
        font-size: 0.2rem;
        z-index: 6;
        cursor: pointer;
      }
    }
    .maxHeiht {
      height: auto;
      box-shadow: 0 5px 5px #2d303c;
    }
  }
}
.queryForm {
  .el-form-item {
    margin-bottom: 0;
  }
}
.el-form-item::v-deep{
  margin-bottom: 0;
}
</style>
